#product > .filter {
  position: relative;
}
#product > .filter > .filter-name {
  display: flex;
  height: 30px;
}
#product > .filter > .filter-name > a {
  width: 50%;
  height: 30px;
  display: block;
  text-align: center;
  line-height: 30px;
  border: 1px solid #e6e6e6;
  position: relative;
}
#product > .filter > .filter-name > a:before {
  content: "";
  width: 16px;
  height: 12px;
  display: block;
  background-image: url("../images/down.png");
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
#product > .filter > .filter-name > a.opened:before {
  background-image: url("../images/up.png");
}
#product > .filter > .shop-content,
#product > .filter > .area-content {
  position: absolute;
  top: 30px;
  width: 100%;
  background-color: white;
  display: none;
}
#product > .filter > .shop-content > a,
#product > .filter > .area-content > a {
  display: block;
  padding: 10px;
  position: relative;
}
#product > .filter > .shop-content > a.haha:before,
#product > .filter > .area-content > a.haha:before {
  content: "";
  width: 27px;
  height: 22px;
  display: block;
  background-image: url("../images/check.png");
  background-size: 27px 22px ;
  background-repeat: no-repeat;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
#product > .product-list {
  display: flex;
  flex-wrap: wrap;
  background-color: #f8f8f8;
}
#product > .product-list > .product-box {
  width: 45%;
  text-align: center;
  margin: 20px 2.5% 0;
  background-color: #fff;
}
#product > .product-list > .product-box > p {
  text-align: left;
}
#product > .product-list > .product-box > span {
  display: block;
  text-align: left;
}
